<template>
    <div class="bigBox">
        <a-image src="http://api.yujn.cn/api/60SReadWorld.php?" alt=""></a-image>
        <a-image v-for="item in list" :src='`http://api.yujn.cn/api/moyu.php?msg=${item}&type=image`' alt="">
        </a-image>
        <div class="video">
            <BaseVideo id="Video" :autoplay="false" :loop="true"
                videoUrl="http://api.yujn.cn/api/moyu.php?msg=摸鱼日报美女视频&type=image">
            </BaseVideo>
        </div>
    </div>
</template>

<script setup lang="ts">
const list: any = ['新闻简报', '摸鱼日报', '明星八卦', '内涵段子', '星座运势']
</script>

<style scoped lang="scss">
.bigBox {
    height: 100%;
    width: 100%;
    @include scroll-bar();
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;

    img {
        width: 100%;
        height: 100%;
    }

    .video {
        width: 100%;
        height: 900px;
    }
}
</style>